<template>
	<view class="inspectnav">
		<view class="inspect">
			<view class="info-top">
				<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/info-top.png" mode=""></image>
			</view>
			<view class="tips">注：针对已在线下机构中心报名缴费成功选手，在此处关联报名信息，如不清楚请咨询所在报名中心。</view>
			<view class="acea-row row-between-wrapper item">
				<view class="fs30 fc333" style="margin-top: 30rpx;">选择赛段</view>
				<view>
					<w-select 
					    style="margin-left: 20rpx;" 
					    v-model='chooseValue' 
					    :list='list'
					    valueName='title' 
					    keyName="stage_id"
					    @change='change'
					>
					</w-select>
				</view>
			</view>
			<view class="acea-row row-between-wrapper item">
				<view class="fs30 fc333" >报名机构</view>
				<view class="jigou acea-row row-center row-middle">
					<input type="text" v-model="keyword" placeholder="请输入报名机构" placeholder-class="fs26" 
					@focus="onfocus" @blur="close" @input="onKeyInput" />
					<view class="selectbox" v-if="scrollShow">
						<scroll-view class="scroll-nav" scroll-y="true">
							<block v-for="(item,index) in jiagoulist" :key="index">
								<view class="title" @click.stop="scrollkey(item)">{{ item.title }}</view>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper item">
				<view class="fs30 fc333">姓名</view>
				<view class="jigou acea-row row-center row-middle">
					<input type="text" v-model="title" placeholder="请输入姓名" placeholder-class="fs26"/>
				</view>
			</view>
			<view class="acea-row row-between-wrapper item">
				<view class="fs30 fc333">手机号</view>
				<view class="jigou acea-row row-center row-middle">
					<input type="text" v-model="phone" placeholder="请输入手机号" placeholder-class="fs26"/>
				</view>
			</view>
		</view>
		
		<view class="confirm" @tap="open">点击确认</view>
		
		<uni-popup type="center" ref="center">
			<view class="frame acea-row row-column row-middle row-around">
				<view class="fs36 fc333 bold">温馨提示</view>
				<view class="fs40 fc333 bold mt30">您确定校验报名信息吗?</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="btn bgccc fc9e" @click="close">取消</view>
					<view class="btn fcwhite bgtheme" @click="confrim">确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import{
		selectHuodong,
		stageList,
		confirmAssociation
	} from '@/api/other.js'
	// import select from '@/components/select.vue'
	import Wselect from '@/components/w-select/w-select.vue'  
	export default {
		components:{
			Wselect
		},
		data() {
			return {
				page: 1, 
				scrollShow:false,
				keyword:'',
				chooseValue: "",
				list: [],
				stage_id:'',
				jiagoulist:[],
				huodong_id:'',
				title:'',
				phone:'',
				
			};
		},
		watch:{
			keyword(){
				if( !this.huodong_id || this.huodong_id<1 ){
					if( this.keyword.length>0 ){
						this.scrollShow = true;
					}else{
						this.scrollShow = false;
					}
					this.getselectHuodong();
				}
			}
		},
		mounted() {
			this.getlist();
		},
		methods:{
			onfocus(){
				if( this.huodong_id>0 || this.keyword.length>0 ){
					this.huodong_id = 0;
				}
			},
			onKeyInput(event){
				// if( !this.huodong_id || this.huodong_id<1 ){
				// 	this.keyword = event.target.value;
				// 	if( this.keyword.length>0 ){
				// 		this.scrollShow = true;
				// 	}else{
				// 		this.scrollShow = false;
				// 	}
				// 	this.getselectHuodong();
				// }
			},
			scrollkey(item){
				this.huodong_id = item.huodong_id;
				this.keyword = item.title;
				this.scrollShow = false;
			},
			getlist(){
				stageList({ xiangmu_id: 1 }).then(res=>{
					this.list = res.data.list;
				})
			},
			change(e){
				this.stage_id = this.chooseValue;
			},
			getselectHuodong(){
				let data = {
					limit:10,
					page: this.page,
					stage_id:  this.stage_id,
					keyword: this.keyword
				}
				selectHuodong(data).then(res=>{
					this.jiagoulist = res.data.data;
				})
			},                                    
			confrim(){
				let that = this;
				let data = {
					huodong_id: that.huodong_id,
					title: that.title,
					phone: that.phone
				}
				confirmAssociation(data).then(res=>{
					that.$util.Tips({  title: res.msg },()=>{
						uni.navigateBack()
					});
				}).catch(err=>{
					that.$util.Tips({  title: err });
				})
			},
			open(){
				let that = this;
				let data = {
					huodong_id: that.huodong_id,
					title: that.title,
					phone: that.phone
				}
				if( !data.huodong_id ) return that.$util.Tips({  title: '请选择机构' });
				if( !data.title ) return that.$util.Tips({  title: '请输入姓名' });
				if( !data.phone ) return that.$util.Tips({  title: '请输入电话号码' });
				that.$refs.center.open();
			},
			close(){
				this.$refs.center.close();
			}
		}
	}
</script>

<style lang="scss">
	.inspectnav{
		
		.inspect{
			background-color: #ffffff;
			padding-bottom: 40rpx;
			
			.info-top{
				width: 750rpx;
				height: 400rpx;
			}
			
			.tips{
				color: #6252DF;
				font-size: 26rpx;
				padding: 30rpx;
			}
			
			.item{
				padding: 0 30rpx;
				padding-bottom: 30rpx;
				// margin-bottom: 30rpx;
				
				
				
				.jigou{
					width: 510rpx;
					min-height: 80rpx;
					box-sizing: border-box;
					border: 1rpx solid #AFAFAF;
					border-radius: 12rpx;
					position: relative;
					
					input{
						width: 100%;
						min-height: 80rpx;
						text-align: center;
						z-index: 10;
					}
					.selectbox-no{
						transform: translate3d(0, 0, 0);
					}
					.selectbox{
						position: absolute;
						left: 0;
						right: 0;
						top: 90rpx;
						z-index: 999;
						width: 510rpx;
						height: 300rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						box-shadow: 0rpx 1rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
						padding: 30rpx;
						// transform: translate3d(0, 0, 0);
						// transition: all .3s cubic-bezier(.25, .5, .5, .9);
						
						.scroll-nav{
							height: 100%;
							text-align: center;
							
							.title{
								margin-bottom: 30rpx;
								font-size: 32rpx;
								color: #333333;
							}
						}
					}
				}
				
			}
			
		}
		
		.confirm{
			width: 630rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			text-align: center;
			font-size: 30rpx;
			margin: 100rpx auto;
			background-color: #6252DF;
			color: #ffffff;
		}
		
		
		.frame{
			width: 660rpx;
			height: 380rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 30rpx;
			
			.btn{
				width: 240rpx;
				height: 70rpx;
				border-radius: 35rpx;
				text-align: center;
				line-height: 70rpx;
				margin: 0 20rpx;
				font-size: 28rpx;
			}
		}
		
	}
</style>
